import { ref, onMounted } from 'vue'

export default function useTodos() {
  const todos = ref([]); // 保存所有代办状态

  // addTodo 函数：添加 todos 状态
  const addTodo = (todo) => todos.value.push(todo);

  /**
   * 发送网络请求，获取远程数据并保存至 todos
   */
  const fetchTodos = async function() {
    const response = await fetch(
      "http://47.102.129.23:8080/main/todo-app/data/data.json"
    );
    const rawTodos = await response.json();
    todos.value = rawTodos.map((item) => ({
      id: item.id,
      content: item.title,
      completed: item.completed
    }))
  };

  onMounted(() => {
    fetchTodos()
  });

  return {
    todos, // 变量：数组类型，保存所有代办状态
    addTodo, // 方法：用于添加新的代办 说明：由子组件 todo-add 触发该事件，并传入新的 todo 代办内容
  }
}